<template>
  <view>
    <swiper :style="swiperData.style ? swiperData.style : swiperHeight"
      :class="[swiperData.class, (isSwiperscaleAnimation && swiperData.class == 'scaleAnimation') ? customTabbar ? (isIpx ? 'customerTabbarIpxHeight': 'customerTabbarHeight' ) : 'swiperHeightDrop' : '' ]"
      :circular="swiperData.circular" :autoplay="autoplay" :interval="swiperData.interval"
      :duration="swiperData.duration" :indicator-dots="swiperData.indicatorDots"
      :indicator-color="swiperData.indicatorColor" :indicator-active-color="swiperData.indicatorActiveColor"
      :next-margin="swiperData.nextMargin"  @animationfinish="onAnimation"  :current="currentIndex">
      <block v-for="(firstbannerItem, firstbannerIndex) in swiperData.child" :key="firstbannerIndex">
        <swiper-item v-if="firstbannerItem.tagType == 'swiper-item'" :class="firstbannerItem.class">
          <view style="position: absolute;width: 100%;height: 100%;z-index: 20;" @click="hanldVideo"
            v-if="firstbannerItem.videomodel == 'true'"></view>
          <block v-for="(secondbannerItem, secondbannerIndex) in firstbannerItem.child" :key="secondbannerIndex">
            <view v-if="secondbannerItem.tagType == 'div'" :class="secondbannerItem.class"
              :style="secondbannerItem.style">
              <!-- 遮罩 -->
              <block v-for="(thirdbannerItem, thirdbannerIndex) in secondbannerItem.child" :key="thirdbannerIndex">
                <image @click.stop="cmsClickHandle" :data-handle="thirdbannerItem.onclick"
                  :data-text="thirdbannerItem.text" v-if="thirdbannerItem.tagType == 'img'"
                  :mode="thirdbannerItem.mode ? thirdbannerItem.mode : modeStyle" :src="thirdbannerItem.src"
                  :class="[thirdbannerItem.class, isSwiperscaleAnimation && thirdbannerItem.class == 'scaleAnimation' ? 'swiperimageStyle' : 'swiperimageStyledefault']"
                  :style="thirdbannerItem.style"></image>
                <video class="swiper-video-countdown" v-if="thirdbannerItem.tagType == 'video'"
                  :style="(windowHeight <= 660 && thirdbannerItem.smallscreenstyle) ? thirdbannerItem.smallscreenstyle : (windowHeight > 660 && windowHeight <= 770 && thirdbannerItem.middlescreenstyle) ? thirdbannerItem.middlescreenstyle : (windowHeight > 770 && thirdbannerItem.bigscreenstyle) ? thirdbannerItem.bigscreenstyle : thirdbannerItem.style "
                  :class="[thirdbannerItem.class, isSwiperscaleAnimation && thirdbannerItem.class == 'scaleAnimation' ? 'swiperHeightDrop' : '' ]"
                  :src="thirdbannerItem.src" :autoplay="thirdbannerItem.autoplay"
                  :controls="thirdbannerItem.controls == 'false' ? false : true"
                  :enable-progress-gesture="thirdbannerItem.enableProgressGesture"
                  :initial-time="thirdbannerItem.initialTime" :loop="thirdbannerItem.loop"
                  :muted="thirdbannerItem.muted" :show-loading="thirdbannerItem.showLoading"
                  :object-fit="thirdbannerItem.objectFit" :poster="thirdbannerItem.poster"
                  :show-mute-btn="thirdbannerItem.showMuteBtn" :show-play-btn="thirdbannerItem.showPlayBtn"
                  :show-center-play-btn="thirdbannerItem.showCenterPlayBtn"
                  :show-fullscreen-btn="thirdbannerItem.showFullscreenBtn"
                  :play-btn-position="thirdbannerItem.playBtnPosition" @ended="videoEnd">
                </video>
                <navigator @click.stop="navigatorClickHandle(thirdbannerItem)" v-if="thirdbannerItem.tagType == 'a'"
                  :url="thirdbannerItem.href" :target="thirdbannerItem.target" :class="thirdbannerItem.class"
                  :style="thirdbannerItem.style" :open-type="thirdbannerItem.opentype || 'navigate'" hover-class="none"
                  :app-id="thirdbannerItem.appid" :path="thirdbannerItem.path" :tracken="thirdbannerItem.tracken"
                  :trackep="thirdbannerItem.trackep" :data-roomid="firstbannerItem.roomid"
                  :data-starttime="firstbannerItem.textstart" :data-endtime="firstbannerItem.textend"
                  :data-en="firstbannerItem.en" :data-ep="firstbannerItem.ep" :data-carea="firstbannerItem.carea"
                  :data-pagename="firstbannerItem.pagename" :data-path="firstbannerItem.path">
                  <block v-for="(fourthbannerItem, fourthbannerIndex) in thirdbannerItem.child"
                    :key="fourthbannerIndex">
                    <image v-if="fourthbannerItem.tagType == 'img'"
                      :mode="fourthbannerItem.mode ? fourthbannerItem.mode : modeStyle" :src="fourthbannerItem.src"
                      :class="[fourthbannerItem.class, isSwiperscaleAnimation && fourthbannerItem.class == 'scaleAnimation' ? 'swiperimageStyle' : 'swiperimageStyledefault']"
                      :style="fourthbannerItem.style"></image>
                  </block>
                </navigator>
                <h2 v-if="thirdbannerItem.tagType == 'h2'" :class="thirdbannerItem.class"
                  :style="thirdbannerItem.style">{{ thirdbannerItem.text }}</h2>
                <p v-if="thirdbannerItem.tagType == 'p'" :style="thirdbannerItem.style" :class="thirdbannerItem.class">
                  {{ thirdbannerItem.text }}
                </p>
                <label v-if="thirdbannerItem.tagType == 'label'" :class="thirdbannerItem.class"
                  :style="thirdbannerItem.style">{{ thirdbannerItem.text }}</label>
                <!-- 第四层循环 tagType == 'div'-->
                <view v-if="thirdbannerItem.tagType == 'div'" :class="thirdbannerItem.class"
                  :style="isIphoneX ? thirdbannerItem.style : thirdbannerItem.smallscreenstyle"
                  >
                  <view :style="currentIndex != 0 ? 'display:block;' : showStatus ? 'display:block;' : 'display:none;'">
                    <block v-for="(fourthbannerItem, fourthbannerIndex) in thirdbannerItem.child"
                      :key="fourthbannerIndex">
                      <navigator @click.stop="navigatorClickHandle(fourthbannerItem)"
                        v-if="fourthbannerItem.tagType == 'a'" :url="fourthbannerItem.href"
                        :target="fourthbannerItem.target" :class="fourthbannerItem.class"
                        :style="fourthbannerItem.style" :open-type="fourthbannerItem.opentype || 'navigate'"
                        hover-class="none" :app-id="fourthbannerItem.appid" :path="fourthbannerItem.path"
                        :tracken="thirdbannerItem.tracken" :trackep="thirdbannerItem.trackep">
                        {{ fourthbannerItem.text }}
                      </navigator>
                      <block v-if="fourthbannerItem.tagType == 'h2'">
                        <uni-countdown :countdownStyle="fourthbannerItem.style"
                          :showColon.sync="fourthbannerItem.showcolon" :showDayNum.sync="fourthbannerItem.showdaynum"
                          :showHourNum.sync="fourthbannerItem.showhournum"
                          :showMinuteNum.sync="fourthbannerItem.showminutenum"
                          :showSecondNum.sync="fourthbannerItem.showsecondnum"
                          :showDaySplit.sync="fourthbannerItem.showdaysplit"
                          :showHourSplit.sync="fourthbannerItem.showhoursplit"
                          :showMinuteSplit.sync="fourthbannerItem.showminutesplit"
                          :showSecondSplit.sync="fourthbannerItem.showsecondsplit"
                          :dayNumStyle="fourthbannerItem.daynumstyle" :hourNumStyle="fourthbannerItem.hournumstyle"
                          :minuteNumStyle="fourthbannerItem.minutenumstyle"
                          :secondNumStyle="fourthbannerItem.secondnumstyle"
                          :daySplitStyle="fourthbannerItem.daysplitstyle"
                          :hourSplitStyle="fourthbannerItem.hoursplitstyle"
                          :minuteSplitStyle="fourthbannerItem.minutesplitstyle"
                          :secondSplitStyle="fourthbannerItem.secondsplitstyle"
                          :day="filterChecked.countDownTimeChange(fourthbannerItem.finishtime,'day',serverTime)"
                          :hour="filterChecked.countDownTimeChange(fourthbannerItem.finishtime,'hour',serverTime)"
                          :minute="filterChecked.countDownTimeChange(fourthbannerItem.finishtime,'minute',serverTime)"
                          :second="filterChecked.countDownTimeChange(fourthbannerItem.finishtime,'second',serverTime)"
                          @timeup='timeup'>
                        </uni-countdown>
                      </block>
                      <p v-if="fourthbannerItem.tagType == 'p'" :style="fourthbannerItem.style"
                        :class="fourthbannerItem.class">{{ fourthbannerItem.text }}</p>
                      <!-- 第五层循环 tagType == 'div'-->
                      <view v-if="fourthbannerItem.tagType == 'div'" :class="fourthbannerItem.class"
                        :style="fourthbannerItem.smallscreenstyle ? isIphoneX ? fourthbannerItem.style : fourthbannerItem.smallscreenstyle : fourthbannerItem.style"
                        >
                        <block v-for="(fifthbannerItem, fifthbannerIndex) in fourthbannerItem.child"
                          :key="fifthbannerIndex">
                          <navigator @click.stop="navigatorClickHandle(fifthbannerItem)"
                            v-if="fifthbannerItem.tagType == 'a'" :url="fifthbannerItem.href"
                            :target="fifthbannerItem.target" :class="fifthbannerItem.class"
                            :style="fifthbannerItem.style" :open-type="fifthbannerItem.opentype || 'navigate'"
                            hover-class="none">
                            {{ fifthbannerItem.text }}
                          </navigator>
                          <image v-if="fifthbannerItem.tagType == 'img'"
                            :mode="fifthbannerItem.mode ? fifthbannerItem.mode : modeStyle" :src="fifthbannerItem.src"
                            :class="[fifthbannerItem.class, isSwiperscaleAnimation && fifthbannerItem.class == 'scaleAnimation' ? 'swiperimageStyle' : 'swiperimageStyledefault']"
                            :style="fifthbannerItem.style"></image>
                          <h2 v-if="fifthbannerItem.tagType == 'h2'" :style="fifthbannerItem.style"
                            :class="fifthbannerItem.class">{{ fifthbannerItem.text }}</h2>
                          <p v-if="fifthbannerItem.tagType == 'p'" :style="fifthbannerItem.style"
                            :class="fifthbannerItem.class">{{ fifthbannerItem.text }}</p>
                        </block>
                      </view>
                    </block>
                  </view>
                </view>
              </block>
            </view>
          </block>
        </swiper-item>
      </block>
    </swiper>
  </view>
</template>
<script module="filterChecked" lang="wxs" src="../../../utils/filter.wxs"></script>
<script>
  import {
    SYSTEM_INFO,
  } from '@/utils/constant';
  import util from '@/utils/util';
  import {
    lithaReport
  } from '@/utils/litha_report';
  export default {
    props: {
      swiperData: Object,
      serverTime: String,
      isSwiperscaleAnimation: {
        default: false,
        type: Boolean,
      }
    },
    data() {
      return {
        windowHeight: 0, // 屏幕高度
        windowWidth: 0,
        swiperHeight: '',
        videoStyle: '',
        customTabbar: true,
        isIpx: getApp().globalData.isIpx,
        autoplay: false, //初始禁止自动播放
        currentIndex: 0,
        showStatus: true,
        isVideoPlay: true,
        isIphoneX: false,
        Animation:false
      };
    },

    created() {
      let that = this;
      let systemInfo = uni.getStorageSync(SYSTEM_INFO);
      that.windowHeight = systemInfo.windowHeight;
      that.windowWidth = systemInfo.windowWidth;
      let ratio = that.windowWidth / that.windowHeight
      if (ratio < 750 / 1334) {
        this.isIphoneX = true;
      }
      // 视频宽高 1:1
      that.videoStyle = 'height:' + that.windowWidth + 'px' + ';' + 'width:' + that.windowWidth + 'px';
      that.customTabbar = this.$programSetting.customTabbar;
      if (that.customTabbar) {
        if (this.isIpx) {
          that.swiperHeight = 'height:calc(100vh - 150rpx)'
        } else {
          that.swiperHeight = 'height: calc(100vh - 120rpx)'
        }
      } else {
        that.swiperHeight = 'height:' + systemInfo.windowHeight + 'px';
      }
    },

    mounted() {},
    methods: {
      // 倒计时组件时间结束触发
      timeup() {
        this.$emit('timeup')
      },
      onAnimation (e) {
         this.currentIndex = e.detail.current;
         if (e.detail.current == 0) {
           this.autoplay = false;
           setTimeout(() => {
             this.showStatus = true;
           }, 10);
         } else {
           this.showStatus = false;
           this.autoplay = true
         }

        const query = uni.createSelectorQuery().in(this);
        const nodeRefs = query.selectAll('.swiper-video-countdown');
        nodeRefs.context((res) => {
          res.forEach(item => {
            if (e.detail.current === 0) {
              item.context.play();
              // this.autoplay = false;
              this.isVideoPlay = true;
            } else {
              // if (this.isVideoPlay) {
                this.isVideoPlay = false;
                item.context.stop();
                // this.autoplay = true
              // }
            }
          })
        }).exec();
      },

      // 视频结束事件开启自动轮播并跳转下一屏
      videoEnd(e) {
        if (this.currentIndex == 0) {
          this.autoplay = true;
          this.currentIndex = 1;
        }
      },

      hanldVideo() {
        uni.navigateTo({
          url: '/pages/litha/litha'
        });
        let Params = {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "c_event_category_1": 'browse',
          "c_content_name": '即刻揭晓',
          "c_link_pagename": '邂逅新生首页',
          'c_link_path': '/page/litha/litha'
        }
        getApp().commonClTrack("c_ebmp_home_click_banner", Params);
        lithaReport("c_ebmp_home_click_banner", Params)
      },

      navigatorClickHandle(val) {
        this.$emit('navigatorClickHandle', val)
        let roomid = val.roomid;
        if (!val.textend) {
          let starttime = val.textend;
          let endtime = val.textend
          let startTime = new Date(starttime).getTime();
          let endTime = new Date(endtime).getTime();
          let trackStartTime = this.trackDate(startTime)
          let trackendTime = this.trackDate(endTime)
        }
        let handleName = val.onclick;
        let carea = val.carea;
        let pagename = val.pagename;
        let path = val.path;
        if (!!val.en) {
          let clTrackPrams = {
            'c_content_name': val.cname,
            'c_link_pagename': val.pagename,
            'c_link_path': val.linkpath
          }
          getApp().commonClTrack(val.en, clTrackPrams)
        }
        if (handleName == 'infoTrack') {
          let clTrackPrams = {
            'c_area': carea,
            'c_link_pagename': pagename,
            'c_link_path': path
          }
          getApp().commonClTrack(val.en, clTrackPrams)
        }
        // kv跳转直播间解析
        if (handleName == 'toRoom') {
          let roomId = roomid;
          let customParams = encodeURIComponent(
            JSON.stringify({
              path: 'pages/index/index',
              pid: 1
            })
          );
          //家园系列活动页-点击kv查看直播埋点
          let clTrackPrams = {
            'c_live_start_time': trackStartTime || '',
            'c_live_end_time': trackendTime || ''
          }
          getApp().commonClTrack('c_ebmp_homecollection_live_click', clTrackPrams)
          // 开发者在直播间页面路径上携带自定义参数（如示例中的path和pid参数），后续可以在分享卡片链接和跳转至商详页时获取，详见【获取自定义参数】、【直播间到商详页面携带参数】章节（上限600个字符，超过部分会被截断）
          wx.navigateTo({
            url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
          });
        }
      },
      cmsClickHandle(e) {},
      //埋点北京时间转换成utc时间
      trackDate(timeStamp) {
        var timeDifference = timeStamp - 8 * 60 * 60 * 1000;
        let utcDateTime = util.timeFormat(timeDifference, true)
        return utcDateTime
      },
    },
  }
</script>

<style lang="less">
  .swiperHeightDrop {
    height: 100vh !important;
    transition: all linear .35s;
  }

  .customerTabbarHeight {
    height: calc(100vh - 120rpx) !important;
    transition: all linear .35s;
  }

  .customerTabbarIpxHeight {
    height: calc(100vh - 150rpx) !important;
    transition: all linear .35s;
  }

  .swiperimageStyle {
    transform: scale(1.2);
    transition: all linear .35s;
  }

  .swiperimageStyledefault {
    transform: scale(1);
    transition: all linear .35s;
  }
</style>
